<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <title>过程数据</title>
</head>
<body style="text-align:center;">

<div style="text-align: center;">
    <div class="layui-inline">
        <table style="margin-left: 50px" id="constructionList" lay-filter="construction"></table>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['table','form','layer'],function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer;

        table.render({
            elem:"#constructionList"
            ,height:400
            ,width:900
            ,url: 'json/processData.json' //数据接口
            ,page: true //开启分页
            ,cellMinWidth:90
            ,title:"实时数据"
            ,cols: [[ //表头
                {field: 'time', title: '时间', width:200, sort: true, fixed: 'left'}
                ,{field: 'yali', title: '压力', width:100,templet:function (d) {
                        return d.yali+" MPa";
                    }}
                ,{field: 'liuliang', title: '流量', width: 100,templet:function (d) {
                        return d.liuliang+" L/min";
                    }}
                ,{field: 'jinjiang', title: '进浆流量', width: 100,templet:function (d) {
                        return d.jinjiang+" L/min";
                    }}
                ,{field: 'fanjiang', title: '返浆流量', width: 100, sort: true,templet:function (d) {
                        return d.fanjiang+" L/min";
                    }}
                ,{field: 'midu', title: '密度', width: 110, sort: true,templet:function (d) {
                        return d.midu+" g/cm³";
                    }}
                ,{field: 'zhuangtai', title: '状态',templet:function (d) {
                        if(1 == d.zhuangtai){
                            return "<span style='color: #3ff012'>在线</span>";
                        }else{
                            return "<span style='color: red'>不在线</span>";
                        }
                    }}
            ]]
        });

        table.on('tool(construction)',function (obj) {
            if("process" == obj.event){
                layer.confirm("...");
                /*layer.open({
                    type:2,
                    content:"你好"
                })*/
            }
        })
    })

</script>
</body>
</html>